<template>
  <div>{{ count }}</div>
  {{ obj.a }}
  <a-button @click="add">增加</a-button>
  <!-- <a-button @click="unWatch">解除监听</a-button> -->
</template>

<script setup>
import { ref, watch, watchEffect } from 'vue'

// 1. 最简单用法：
// const count = ref(1)
// const add = () => {
//   count.value++
//   //count.value = count.value + 1
// }
// watch(count, (newValue, oldValue) => {
//   console.log(newValue, oldValue)
// })

// 2. 监听对象下的属性，需要传入方法来监听
// const count = ref({ a: 0 })
// const add = () => {
//   count.value.a++
//   //count.value = count.value + 1
// }
// watch(
//   () => count.value.a,
//   (newValue, oldValue) => {
//     console.log(newValue, oldValue)
//   }
// )

// 3. 监听对象下每一个属性的变化
// const count = ref({ a: 0 })
// const add = () => {
//   count.value.a++
//   //count.value = count.value + 1
//   //   count.value = { a: count.value.a + 1 }
// }
// watch(
//   count,
//   (newValue, oldValue) => {
//     // 新值和旧值都指向了同一个对象，所以他们里面的值是相同的
//     console.log(newValue, oldValue)
//   },
//   { deep: true }
// )

// 4. 监听多个变量下面的值的改变和解除监听
// const a = ref(1)
// const b = ref(2)
// const count = ref(3)

// const add = () => {
//   a.value++
//   b.value++
//   count.value++
//   unWatch()
// }

// const unWatch = watch([a, b, count], (newValue, oldValue) => {
//   console.log(newValue, oldValue)
// })

// 5. flush的使用
// const count = ref(1)

// const add = () => {
//   count.value++
// }
// watch(
//   count,
//   (newValue, oldValue) => {
//     console.log(newValue, oldValue)
//   },
//   { flush: 'pre' }
// )

// watch(
//   count,
//   (newValue, oldValue) => {
//     console.log(newValue, oldValue)
//   },
//   { flush: 'post' }
// )

// 5. 需要在组件创建阶段立即执行
// const a = ref(1)
// const b = ref(2)
// const count = ref(3)

// const add = () => {
//   a.value++
//   b.value++
//   count.value++
//   unWatch()
// }

// const unWatch = watch(
//   [a, b, count],
//   (newValue, oldValue) => {
//     console.log(newValue, oldValue)
//   },
//   { immediate: true }
// )

// watchEffect
// 1. 进入就会执行一次
// 2. 拿不到老值
// 3. 它没有深度监听
// 4. 需要在最函数起始位置，声明好你要监听的数据，如果有if的情况，会导致监听不到数据的改变
const count = ref(1)
const obj = ref({ a: 1 })
const add = () => {
  obj.value.a++
}
let test = true
watchEffect(() => {
  const a = obj.value.a
  if (test === false) {
    console.log(a)
  }
  //   console.log(obj.value.a)
  test = false
})
</script>

<style></style>
